<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商家后台系统 Logo</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background-color: #1a1a1a; /* 更深的背景色 */
      overflow: hidden;
      font-family: 'Arial', sans-serif; /* 简洁的字体 */
    }

    .logo-container {
      position: relative;
      z-index: 1;
    }

    .logo-icon {
      width: 120px;
      height: 120px;
      background: linear-gradient(45deg, #ff0000, #0000ff);
      border-radius: 50%;
      position: relative;
      animation: glitchPulse 3s infinite, iconRotate 10s infinite; /* 增加图标旋转效果 */
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 20px #ff0000, 0 0 30px #0000ff;
    }

    @keyframes glitchPulse {
      0% {
        transform: scale(1);
      }
      25% {
        transform: scale(1.1) rotate(5deg);
        filter: hue-rotate(10deg);
      }
      50% {
        transform: scale(1) rotate(0deg);
        filter: hue-rotate(0deg);
      }
      75% {
        transform: scale(1.1) rotate(-5deg);
        filter: hue-rotate(-10deg);
      }
      100% {
        transform: scale(1) rotate(0deg);
        filter: hue-rotate(0deg);
      }
    }

    @keyframes iconRotate {
      100% {
        transform: rotate(360deg);
      }
    }

    .logo-icon i {
      font-size: 60px;
      color: white;
      text-shadow: 0 0 10px white;
    }

    .logo-text-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo-text {
      font-size: 64px;
      font-weight: bold;
      color: transparent; /* 文字颜色透明，使用 text-stroke */
      -webkit-text-stroke: 2px #00ffff;
      white-space: nowrap;
      text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
      letter-spacing: 5px; /* 字间距 */
      position: absolute;
    }

    .logo-text span {
      display: inline-block;
      animation: orbit 10s linear infinite;
      opacity: 1;
    }

    @keyframes orbit {
      0% {
        transform: rotate(0deg) translateX(150px) rotate(0deg);
      }
      100% {
        transform: rotate(360deg) translateX(150px) rotate(-360deg);
      }
    }

    .logo-text span:nth-child(1) {
      animation-delay: 0s;
    }

    .logo-text span:nth-child(2) {
      animation-delay: -2s;
    }

    .logo-text span:nth-child(3) {
      animation-delay: -4s;
    }

    .logo-text span:nth-child(4) {
      animation-delay: -6s;
    }

    .logo-text span:nth-child(5) {
      animation-delay: -8s;
    }

    .logo-text span:nth-child(6) {
      animation-delay: -10s;
    }

    .glitch-effect {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="rgba(255,0,0,0.2)" /><rect width="100%" height="100%" fill="rgba(0,0,255,0.2)" transform="translate(5, -5)" /></svg>');
      animation: glitchMove 5s infinite linear;
    }

    @keyframes glitchMove {
      0% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(-5px, 5px);
      }
      100% {
        transform: translate(0, 0);
      }
    }
  </style>
</head>

<body>
<div class="logo-container">
  <div class="logo-icon">
    <i class="fas fa-cogs"></i> <!-- 这里使用了 Font Awesome 的图标，你可以根据喜好更换 -->
  </div>
  <div class="logo-text-container">
    <div class="logo-text">
      <span>商</span>
      <span>家</span>
      <span>后</span>
      <span>台</span>
      <span>系</span>
      <span>统</span>
    </div>
  </div>
</div>
<div class="glitch-effect"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js"></script>
</body>

</html>
